<style>
    .layui-form-label.required:before { /* 这种写法也可以*/
        content: ' *';
        color: red;
    }
    .open-form .layui-form-label {
        width: 110px;
    }
    .open-form .layui-input-block{
        margin-left: 140px;
    }
</style>


<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="proTaskZYForm" class="layui-form proTaskZYForm open-form">
    <div class="open-model">
        <div class="open-auto">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>产品信息</legend>
            </fieldset>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label">来源：</label>
                    <div class="layui-input-block">
                        <input name="source" disabled type="text" class="layui-input"
                               required autocomplete="off" value="自研产品"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">产品类别：</label>
                    <div class="layui-input-block">
                        <input name="productTypeName" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                        <input id="productTypeId" name="productTypeId" type="hidden" value="' + d.proTypeId + '"
                               lay-verify="required">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">产品性质：</label>
                    <div class="layui-input-block">
                        <input name="productNatureName" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">产品属性：</label>
                    <div class="layui-input-block">
                        <input name="assemblyNature" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>

            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label">内部SKU号：</label>
                    <div class="layui-input-block" id="SkuInfo">
                        <input id="productDetailId" name="productDetailId" type="hidden">
                        <input id="inSkuCode" name="inSkuCode" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">内部SKU名称：</label>
                    <div class="layui-input-block">
                        <input type="text" id="inSkuName" disabled name="inSkuName" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">内部规格码：</label>
                    <div class="layui-input-block">
                        <input type="text" id="inSkuSpec" disabled name="inSkuSpec" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">计量单位：</label>
                    <div class="layui-input-block">
                        <input name="inSkuUnitName" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label">基础单位：</label>
                    <div class="layui-input-block">
                        <input name="inUnitName" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">基础单位数量：</label>
                    <div class="layui-input-block">
                        <input type="text" disabled id="inUnitCount" name="inUnitCount" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label">说明：</label>
                    <div class="layui-input-block">
                        <textarea id="inRemark" disabled name="inRemark" class="layui-textarea"
                                  autocomplete="off"/>
                    </div>
                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>校对信息</legend>
            </fieldset>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label required">校对结果：</label>
                    <div class="layui-input-block">
                        <select id="proofreadResult" name="proofreadResult" lay-filter="proofreadResult"
                                class="common-select-search">
                            <option value="">请选择</option>
                            <option value="1">校对通过</option>
                            <option value="2">驳回调整</option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label">校对备注：</label>
                    <div class="layui-input-block">
                        <textarea name="proofreadRemark" id="proofreadRemark" placeholder="校对备注" class="layui-textarea"
                                  autocomplete="off"/>
                    </div>
                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>其他信息</legend>
            </fieldset>
            <div class="layui-form-item layui-row">
                <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="YSBZ">产品验收标准</li>
                        <li lay-id="BOMGUIHUA">MRP物料BOM规划</li>
                        <li lay-id="GCGUIHUA">产品工程规划</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form-item layui-row">
                                <label class="layui-form-label">版本编号：</label>
                                <input style="border: none;" type="text" value="BCZ380C9.2.1.4.1.1.1-2" disabled
                                       id="infoVersion" name="infoVersion" class="layui-input">
                            </div>
                            <div class="layui-form-item layui-row">
                                <div class="layui-col-md5">
                                    <div id="TuZhiPdf" style="height: 100%;margin-left:10px">

                                    </div>
                                </div>
                                <div class="layui-col-md7">
                                    <div class="layui-form-item layui-row">
                                        <table class="layui-table" id="testItemTable" lay-filter="testItemTable"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item" id="bom_info">
                            <div class="layui-form-item layui-row">
                                <div class="layui-form-item layui-row">
                                    <table class="layui-table" id="bomTreeTableInfo" lay-filter="bomTreeTableInfo"></table>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item" id="gy">
                            <div class="layui-form-item layui-row">
                                <div class="layui-col-md3">
                                    <label class="layui-form-label">选择工艺路线：</label>
                                    <div class="layui-input-block">
                                        <select id="processLineTemplate" lay-search="" name="processLineTemplate"
                                                lay-filter="processLineTemplate"
                                                class="common-select-search">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-row">
                                <div class="layui-col-md3">
                                    <label class="layui-form-label">关联模具图纸：</label>
                                    <div class="layui-input-block">
                                        <select id="isRelevance" name="isRelevance"
                                                lay-filter="isRelevance"
                                                class="common-select-search">
                                            <option value="0">不关联</option>
                                            <option value="1">关联模具图纸</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md9" id="moldUploadInfo">
                                    <div class="layui-col-md4">
                                        <label class="layui-form-label">模具图纸：</label>
                                        <div class="layui-input-block">
                                            <div id="fileUploadMoldBtn" class="layui-btn" style="float: left;margin-left: 3px">
                                                <i class="layui-icon">&#xe681;</i>上传文件
                                            </div>
                                            <br/>
                                            <div id="addMoldHeaderPdf" style="margin-top: -16px"
                                                 class="companyFormPhotos"></div>
                                            <input name="attachmentMoldPdf" id="attachmentMoldPdf" type="hidden"
                                                   class="layui-input"/>
                                        </div>
                                    </div>
                                    <div class="layui-col-md7">
                                        <label class="layui-form-label">模具图纸备注：</label>
                                        <div class="layui-input-block">
                                    <textarea id="moldRemark" name="moldRemark" placeholder="模具图纸备注"
                                              class="layui-textarea"
                                              autocomplete="off"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-row">
                                <table class="layui-table" id="productProjectTable" lay-filter="productProjectTable"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-normal" id="okSubmit" type="button">确认提交</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
        </div>
    </div>
</form>

<script type="text/html" id="viewAttachmentHtml">
    <div id="example1" style="height: 100%;"></div>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form','tableTreeDj', 'table', 'laydate', 'admin', 'laytpl', 'upload', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var config = layui.config;
        var upload = layui.upload;
        var table = layui.table;
        var admin = layui.admin;
        var form = layui.form;
        var laydate = layui.laydate;
        var tableTree = layui.tableTreeDj;

        let projectTableData = [];
        //初始化data
        let testItemData = [];
        let moldName = "";
        let fileName = "";
        let tzId;
        let tzVersion;
        let data = admin.getTempData('resProTaskZYData');
        let bom_tab = document.querySelector('.layui-tab-title li:nth-child(2)');
        let bom_content = document.querySelector('.layui-tab-content .layui-tab-item:nth-child(2)');
        let gx_tab = document.querySelector('.layui-tab-title li:nth-child(3)');
        let gx_content = document.querySelector('.layui-tab-content .layui-tab-item:nth-child(3)');

        laydate.render({
            elem: '#planGivenTime'
            , type: 'datetime'
        });

        /**
         * 初始化任务详情
         */
        admin.req('enterprise/res/admin/planning/proTask/detail/' + data.id, {}, function (res) {
            if (res.code == 200) {
                form.val('proTaskZYForm', res.data === undefined ? null : res.data);
                projectTableData = res.data.processProjectData;
                testItemData = res.data.testItemData;
                if (res.data.drawInfo) {
                    tzId = res.data.drawInfo.id;
                    tzVersion = res.data.drawInfo.versionName;
                }
                let name = res.data.cusProductFigure;
                let imagUrl = "";
                //初始化文件
                $('#addHeaderPdf').html('<div class="attachments">' +
                    '<div><img style="max-width: 620px" name="attachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"><span class="file-a">' + name + '</span></div></div>');
                $('#attachmentPdf').val(res.data.attachmentPdfUrl);
                imagUrl = res.data.attachmentPdfUrl;
                $('#fileName').text(res.data.cusProductFigure);
                $(".attachments").click(function () {
                    let json = {};
                    json.attachment = imagUrl;
                    showViewAttachmentModel(json);
                })
                if (imagUrl && imagUrl.indexOf(".pdf") !== -1) {
                    PDFObject.embed(imagUrl, "#TuZhiPdf");
                } else {
                    let attachmentHtml = "";
                    imagUrl.split(",").forEach((attachmentUrl, index) => {
                        attachmentHtml += '<div><div><img style="max-width: 620px" src="' + attachmentUrl + '"></div></div>';
                    });
                    $('#TuZhiPdf').html(attachmentHtml);
                }
                //默认隐藏
                if (res.data.drawInfo) {
                    if (res.data.drawInfo.isRelevance === "1") {
                        $("#moldUploadInfo").show();
                        $('#addMoldHeaderPdf').html('<div class="moldAttachments">' +
                            '<div><img name="moldAttachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"><span class="file-a">' + res.data.drawInfo.moldDrawInfo.name + '</span></div></div>');
                        $('#attachmentMoldPdf').val(res.data.drawInfo.moldDrawInfo.fileUrl);
                        $('#moldRemark').val(res.data.drawInfo.moldDrawInfo.remark);
                        moldName = res.data.drawInfo.moldDrawInfo.name;
                        $(".moldAttachments").click(function () {
                            let json = {};
                            json.attachment = res.data.drawInfo.moldDrawInfo.fileUrl;
                            showViewAttachmentModel(json);
                        })
                    } else {
                        $("#moldUploadInfo").hide();
                    }
                    $("#isRelevance").val(res.data.drawInfo.isRelevance);
                } else {
                    $("#moldUploadInfo").hide();
                }

                //初始化工序productProjectTable
                table.render({
                    elem: '#productProjectTable',
                    data: projectTableData,
                    id: 'productProjectTable',
                    limit: 9999,
                    cols: [[
                        {type: 'numbers', title: '序号'}
                        , {
                            field: 'name',
                            align: 'center',
                            title: '工序名称',
                            width: '10%',
                        }
                        , {field: 'proCode', sort: true, title: '产品工序编码'}
                        , {field: 'sorted', sort: true, title: '工序排序'}
                        , {field: 'content', sort: true, title: '工序工艺要求'}
                        , {field: 'qualityParam', sort: true, title: '工序质检要求'}
                        // , {field: 'skuGetCode', edit: 'text', sort: true, title: '领料料号'}
                    ]]
                });

                //如果为空查询关联的
                if (Array.isArray(testItemData) && testItemData.length === 0) {
                    admin.req('enterprise/product/admin/productItem/listByType', {productType:res.data.productTypeId}, function (res) {
                        if (res.code == 200) {
                            testItemData = res.data;
                        }
                        //初始化质检标准表
                        table.render({
                            elem: '#testItemTable',
                            data: testItemData,
                            id: 'testItemTable',
                            limit: 9999,
                            cols: [[
                                {type: 'numbers', title: '序号'}
                                , {
                                    field: 'name',
                                    align: 'center',
                                    title: '检查项'
                                }
                                , {field: 'standard', sort: true, title: '标准'}
                                , {field: 'utensil', sort: true, title: '器具'}
                                , {field: 'way', sort: true, title: '方法'}
                                , {field: 'importance', sort: true, title: '重要程度'}
                                , {field: 'detectionRate', sort: true, title: '检测率'}
                            ]]
                        });
                    })
                }else{
                    //初始化质检标准表
                    table.render({
                        elem: '#testItemTable',
                        data: testItemData,
                        id: 'testItemTable',
                        limit: 9999,
                        cols: [[
                            {type: 'numbers', title: '序号'}
                            , {
                                field: 'name',
                                align: 'center',
                                title: '检查项'
                            }
                            , {field: 'standard', sort: true, title: '标准'}
                            , {field: 'utensil',  sort: true, title: '器具'}
                            , {field: 'way',  sort: true, title: '方法'}
                            , {field: 'importance', sort: true, title: '重要程度'}
                            , {field: 'detectionRate', sort: true, title: '检测率'}
                        ]]
                    });
                }

                //初始化 bom
                // 渲染表格
                tableTree.render({
                    id: '#bomTreeTableInfo',
                    elem: '#bomTreeTableInfo',
                    url: config.base + 'enterprise/res/admin/planning/proBom/bomTree/' + data.productDetailId,
                    page: false,
                    cellMinWidth: 100,
                    where: {limit: 9999},
                    cols: [[
                        {type: 'numbers', title: '序号', fixed: 'left'}
                        , {field: 'productName', sort: true, title: 'BOM产品名称'}
                        , {field: 'productCode', sort: true, title: '产品编号'}
                        , {field: 'productSpec', sort: true, title: '规格码'}
                        , {field: 'productTypeName', sort: true, title: '物资类别'}
                        , {field: 'assemblyNatureName', sort: true, title: '产品性质'}
                        , {field: 'inSkuUnitName', sort: true, title: '计量单位', width: 90}
                        , {field: 'inUnitCount', sort: true, title: '需求数', width: 80}
                        , {field: 'remark', sort: true, title: '描述'}
                    ]]
                }, {keyPid: "parentId", title: "productName"})

                form.render(); //菜单渲染 把内容加载进去

            } else {
                layer.msg(res.msg, {icon: 2});
            }
        });


        //如果产品属性是加工件 就只有工序
        if (data.assemblyNatureId === "3") {
            bom_tab.style.display = 'none';
            bom_content.style.display = 'none';
            //加载工序模板
            admin.initDataSelect("enterprise/product/admin/processLineTemplate/list?page=1&limit=999", null, "processLineTemplate", null, "模板", "name", "id");
        } else {
            gx_tab.style.display = 'none';
            gx_content.style.display = 'none';
        }

        // 上传附件-pdf
        upload.render({
            elem: '#fileUploadMoldBtn'
            , url: config.upload_url + 'uploadFile'
            , data: {}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    layer.msg(res.msg || "上传成功", {icon: 1});
                    let imagUrl = res.data.url;
                    moldName = res.data.fileName;
                    fileName = res.data.fileName;
                    $('#addMoldHeaderPdf').html('<div class="moldAttachments">' +
                        '<div><img name="moldAttachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"><span class="file-a">' + moldName + '</span></div></div>');
                    $('#attachmentMoldPdf').val(imagUrl);

                    $(".moldAttachments").click(function () {
                        let json = {};
                        json.attachment = imagUrl;
                        showViewAttachmentModel(json);
                    })
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg || "上传失败", {icon: 2});
                }
            }
        });

        //校对确认提交
        $("#okSubmit").click(function (){
            let params = {};
            params.id =  data.id;
            params.proofreadResult =  $("#proofreadResult").val();
            params.remark =  $("#proofreadRemark").val();
            console.log("params",params);
            admin.req('enterprise/res/admin/planRecord/submitProofread',params, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('productPlanRecordInfo', {});
                    layer.closeAll('page');
                } else {
                    layer.msg(res.msg, {icon: 2});
                    layer.closeAll('page');
                }
            }, 'POST');
        })

        // 查看附件
        function showViewAttachmentModel(data) {
            admin.open({
                type: 1,
                area: ['60%', '80%'],
                offset: '65px',
                title: '查看附件',
                content: $('#viewAttachmentHtml').html(),
                success: function () {
                    if (data.attachment && data.attachment.indexOf(".pdf") !== -1) {
                        PDFObject.embed(data.attachment, "#example1");
                    } else {
                        var attachmentHtml = "";
                        data.attachment.split(",").forEach((attachmentUrl, index) => {
                            attachmentHtml += '<div><div><img src="' + attachmentUrl + '"></div></div>';
                        });
                        $('#example1').html(attachmentHtml);
                    }
                }
            })
        }

    })

</script>